<template>
	<div class="wrapper">
		<div class="search">
			<div class="search_back iconfont" @click="handleBack">&#xe603;</div>
			<div class="search_content">
				<span class="search_content_icon iconfont">&#xe602;</span>
				<input type="text" class="search_content_input" placeholder="请输入商品名称">
			</div>
		</div>
		<ShopInfo :item="item" />
	</div>
	<Content :shopName = "item.name"></Content>
	<Cart></Cart>
</template>

<script>
	import ShopInfo from '../../components/shopInfo.vue'
	import Content from '../../views/Shop/Content.vue'
	import Cart from '../../views/Shop/Cart.vue'
	import { useRouter,useRoute } from 'vue-router'
	import { ref } from 'vue'
	import { get } from '../../utils/request.js'

	export default {
		name: 'Shop',
		components: { ShopInfo,Content,Cart },
		setup() {
			// 定义路由跳转
			const router = useRouter();
			// 定义route获取路由参数
			const route = useRoute();
			// 获取当前路由参数的id
			const shopId = route.params.id
			// // 添加一个加号的方法
			// const addItem = (shopId,productId,productInfo) => {
			// 	store.commit('addItem',{shopId,productId,productInfo})
			// }
			// 定义数据集
			const item = ref([]);
			const getShopList = async () => {
				// 获取数据
				const result = await get('/api/shop')
				
				if(result?.errno === 0){
					// 将获取的数据存入到数据集里
					item.value = result.data[shopId-1]
					
				}
			}
			getShopList()
			// 路由返回方法
			const handleBack = () => {
				router.back()
			}
			return { item,handleBack }
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 .18rem
	}
	.search {
		display: flex;
		margin: .14rem 0 .04rem 0;
		line-height: .32rem;
		&_back {
			width: .3rem;
			font-size: .24rem;
			color: #B6B6B6;
		}
		&_content {
			display: flex;
			flex: 1;
			background: #F5F5F5;
			border-radius: .16rem;
			&_icon {
				width: .44rem;
				text-align: center;
				color: B7B7B7;
			}
			&_input {
				display: block;
				width: 100%;
				padding-right: .2rem;
				border: none;
				outline: none;
				background: none;
				height: .32rem;
				&::placeholder {
					color: #333;
				}
			}
			
		}
	}
</style>